<!-- 扫雷 -->
<template>
  <el-dialog v-if="show" :modelValue="show" :title="GameName(indexStore.gameArray, props.checkedItem.game_id) + $t('381')" top="10vh" class="arcade-dialog" :close-on-click-modal="false" :close-on-press-escape="false"
    @close="onHideDetails">
    <el-form :model="data" class="addQuery" ref="addQuery" :rules="rules" 
      :validate-on-rule-change="false" :disabled="isDisableUser">
      <form-item :title="t('41')" value="game_name">
        <div class="gameIcon">
          <div class="flex marginR5">
            <el-tag size="small">{{ GamePlatform(indexStore.gameArray,  props.checkedItem.game_id) }}</el-tag>
            <img class="game-icon" :src="selectToLabel(GAMEICON,  props.checkedItem.game_id)" alt="">
          </div>
          {{ GameName(indexStore.gameArray,  props.checkedItem.game_id) }}
        </div>
      </form-item>
      <form-item :title="$t('267')" :pass="true" value="win_big_num">
        <el-input-number :min="0" size="large" v-model="data.win_big_num"  :precision="2"
          clearable controls-position="right" />
          <div class="input-text">{{$t('268')}}</div>
      </form-item>
      <form-item :title="$t('271')" :pass="true" value="min_num">
        <el-select v-model="data.min_num" filterable>
          <el-option v-show="item" v-for="item in 20" :label="item" :value="item" />
        </el-select>
          <div class="input-text">{{$t('272')}}</div>
      </form-item>
      <form-item :title="$t('273')" :pass="true" value="max_num">
        <el-select v-model="data.max_num" filterable>
          <el-option v-show="item && item>=data.min_num" v-for="item in 20" :label="item" :value="item" />
        </el-select>
        <div class="input-text">{{$t('274')}}</div>
      </form-item>
      <form-item :title="$t('269')" :pass="true" value="begin_num">
        <el-select v-model="data.begin_num" filterable>
          <el-option v-show="item && item>=data.min_num && data.max_num>=item" v-for="item in 20" :label="item" :value="item" />
        </el-select>
        <div class="input-text">{{$t('270')}}</div>
      </form-item>
      <form-item :title="$t('249')" :pass="true" value="deduction_rate">
        <el-select v-model="data.deduction_rate" filterable>
          <el-option v-show="item" v-for="item in 3" :label="item+'%'" :value="item" />
        </el-select>
        <div class="input-text">{{$t('275')}}</div>
      </form-item>
      <form-item :title="$t('276')" :pass="true" value="online_odds">
        <el-input-number :min="0" :max="10000" v-model="data.online_odds" size="large"  clearable
          controls-position="right" />
          <div class="input-text">{{$t('277')}}</div>
      </form-item>
      <form-item :title="$t('278')"  :pass="true" value="bet_range"  style="position:relative" :subtract='props.isDisableUser?false:true' @addItem="addPressure">
        <div class="flex " v-for="(item, index) in data.pressureList" :key="index">
          <el-input-number class="width140 marginB5 marginR10" v-model="item.num" :min="0" :max="200" size="large" :precision="2"
            controls-position="right" />
          <div v-show="!props.isDisableUser" class="reduce-btn reduce-btn_new marginL5" @click="reducePressure(index)">-</div>
        </div>
        <div class="input-text">{{ $t('279') }}</div> 
      </form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" v-show="!props.isDisableUser">
        <el-button @click="onHideDetails">{{$t('240')}}</el-button>
        <el-button type="primary" @click="save">{{$t('241')}}</el-button>
      </div>
    </template>
  </el-dialog>
</template> 

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { type FormRules, type FormInstance, ElMessage } from 'element-plus';
import FormItem from '@/components/FormItem/FormItem.vue'
import { getMineConfig, updateMineConfig } from '@/api/settion'
import { GAMEICON } from '@/config/eunm'
import { throttle,selectToLabel, GamePlatform, GameName } from '@/utils/index'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  isDisableUser: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const data = reactive({
  id: 0,
  agent_id: 0,
  game_id: 0,
  game_name: '',
  win_big_num:0, // 可赢最大额度
  begin_num:0, // 默认雷数
  min_num:0, // 最小雷数
  max_num:0, // 最大雷数
  deduction_rate:0, // 扫雷扣点率
  online_odds:0, // 扫雷赔率上限
  pressureList:[{num:0}], // 押注刻度  数组
  mine_num_range:'', // 最小  最大  默认  雷数 1,20,3
  bet_range:'', // 押注刻度  1000,2000,3000
})

watch(
  () => [props.checkedItem, props.show],
  async (value) => {
    if (value[0]) {
      Object.assign(data, props.checkedItem)
    }
    if (value[1]) {
      chooseOperator(props.checkedItem.agent_id, props.checkedItem.game_id)
    }
  },
)


// 获取配置
const chooseOperator = async (id: number, game_id: number) => {
  let res = await getMineConfig({
    agent_id: id,
    game_id: game_id
  });
  res.data.isMaintenance = false
  Object.assign(data, res.data)
}

// 新增押注倍数
const addPressure = () => {
  data.pressureList.push({ num: 0 })
}
// 减少押注倍数
const reducePressure = (index:number) => {
  if (data.pressureList.length <= 1) {
      ElMessage({
        message: t('373'),
        type: 'warning'
      })
    return 
  }
  data.pressureList.splice(index, 1)
}

// 保存
const addQuery = ref<FormInstance>()
// 校验
const rules = reactive<FormRules<typeof data>>({
  win_big_num: [{ required: true, message: t('268'), trigger: 'blur' }],
  begin_num: [{ required: true, message: t('270'), trigger: 'blur' }],
  min_num: [{ required: true, message: t('272'), trigger: 'blur' }],
  max_num: [{ required: true, message: t('274'), trigger: 'blur' }],
  deduction_rate: [{ required: true, message: t('275'), trigger: 'blur' }],
  online_odds: [{ required: true, message: t('277'), trigger: 'blur' }],
})
const save = throttle( async () => {
  if (!addQuery.value) return
  await addQuery.value.validate(async (valid, fields) => {
    if (valid) {
      if (data.begin_num < data.min_num ||  data.begin_num > data.max_num ) {
        ElMessage({
          message: t('374'),
          type: 'warning'
        })
        return 
      }
      await Promise.all([updateMineConfig(data)]) 
      ElMessage({
        message: t('342'),
        type: 'success'
      })
      onHideDetails()
    }
  })
}, 3000)

// 取消
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}

</script>
<style scoped lang="scss">
.input-text{
  display: block;
  flex-basis:100%;
  font-size: 12px;
}
.reduce-btn_new {
  position: absolute;
  right: 5px;
  bottom: -3px;
}
</style>
<style>
.arcade-dialog .el-dialog__body{
  height: 650px;
  overflow: auto
}
</style>